<template>
  <div id="addDeviceConfig" style="margin-top: 10px" v-loading="model.loging">
    <el-row>
      <el-col :span="8" :offset="8" v-if="model.logon"  page_id="welcome" >
        <h1>xxxx</h1>
      </el-col>
      <el-col :span="8" :offset="8" v-if="!model.logon && !model.loging">
        <el-card shadow="always" header="登录"  page_id="login" >
          <el-form ref="form" :model="model" label-width="100px">
            <el-form-item label="登录名">

              <el-input test_id="input_login_name" v-model="model.loginName" placeholder="请输入登录名"></el-input>

            </el-form-item>
            <el-form-item label="密码">

              <el-input test_id="input_password" v-model="model.password" show-password placeholder="请输入密码"></el-input>

            </el-form-item>

            <el-form-item>

              <el-button test_id="button_login" :loading="model.loging" type="primary" round @click="login()">
                登录
              </el-button>
            </el-form-item>
          </el-form>

        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import LoginModel from '@/domain/Login.js'

export default {
  name: 'Welcome',
  data () {
    return {
      model: new LoginModel()
    }
  },
  methods: {
    login: async function () {
      let error = await this.model.login()
      let _this = this
      this.showError(error, function () {
        _this.$bus.emit('loginStatusChanged')
      })
    },
    showError: function (error, success) {
      if (error) {
        this.$message.error(error)
        return
      }
      if (success) {
        success()
      }
    }
  },
  mounted: async function () {
    await this.model.getLogin()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  #addDeviceConfig {
    margin: 10px;
  }
</style>
